* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
html, body {
    line-height: 1.7em;
    font-size: 13px;
    height: 100%;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #000000;
}

h4 {
    font-size:13.5px;
}

h5 {
    font-size:13px;
    color: #a6310e;
}

hr {
    border-top: 1px solid #c2b192;
}

#app {
    max-width: 460px;
    margin: 0 auto;
}
.home-menu {
    background-color: transparent;
    background-image: url(/f/Navigation-bar.webp);
    background-repeat: repeat-x;
    background-size: auto 100%;
    color: #fcd144;
    padding: 3px 10px 3px 10px;
    text-align: center;
    font-size: 16px;
}


.home-head {
    padding: 3px 10px 3px 10px;
    text-align: center;
    font-size: 13px;
}


a:visited {
    color: blue;
}

.pure-menu-item {
    color: white;
    font-weight: bold;
    font-size: 120%;
}
.pure-menu-heading span {
    margin-bottom: 10px;
}
.home-menu .pure-menu-heading {
    color: white;
    font-weight: bold;
    font-size: 120%;
}

.home-menu .pure-menu-selected a {
    color: white;
}

.home-menu a {
    color: #6FBEF3;
}

.nav1 {
    padding: 6px 12px 4px 12px;
    vertical-align:middle;
    background-color: #f2f2f2;
}

.red {
    color: #dc3545;
    font-weight: bolder;
}

.tip {
    vertical-align:middle;
    background-color: #fdf0d9;
    padding: 8px 15px;
    margin-top: 0.5rem;
}

.main {
    background: #ebd19e url(/f/Skin-Content-Background.webp) repeat left top;
    color: #3a3a3a;
    width: 100%;
    height: 100%;
    padding: 10px 7px 0 7px;
    min-height: 100vh;
}

.lvbutton {
    background-color: rgba(211,42,52,0.99);
    color: bisque;
}

.table {
    background-color: white;
    margin-bottom: 0;
}
tr.active {
    background-color: #EBF5FB;
}
tr.disabled {
    background-color: #f2f2f2;
}
td.activebold {
    font-weight: bolder;
}
.warn {
    color: #dc3545;
}

.table {
    background-color: #fdf0d9;
}

.td1 {
}
td.fitwidth {
    width: 1px;
    white-space: nowrap;
}
.progress {
    background-color: #dadada;
    height: 16px;
    min-width: 60px;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.footer {
    position: sticky;
    bottom: 0;
    background-color: #805416;
    color: #fcd144;
    font-weight: bolder;
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    margin: 0 -7px 0 -7px;
    z-index: 1031;
}

.footer-menu {
    position: sticky;
    max-height: 0;
    overflow: hidden;
    bottom: 0;
    background-color: #fff;
    padding: 0px 0px 40px 0px;
    margin-bottom: 40px;
    z-index: 1030;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem 0.25rem 0 0;
    transition: max-height .3s ease;
}

.footer-menu.open{
    max-height: 500px;
    transition: max-height .5s ease;
}

/*.footer a:link {
    color: white;
}
.footer a:visited {
    color: white;
}*/

.stage {
    padding: 10px 12px 4px 12px;
    vertical-align:middle;
}

.card-horizontal {
  display: flex;
  flex: 1 1 auto;
}

.card {
    border: 1px solid #c2b192;
}

.card-title-red {
    color: #a6310e;
}

.modal-content {
    padding: 10px 10px;
    background-color: #000000bb;
    color: #fff;
}

.modal-content h5.modal-title {
    color: #f2f2c3;
}

.modal-content h5 {
    color: #f2f2c3;
}

.modal-content button.close {
    color: lightyellow;
}

.modal-header { 
    border-bottom: 1px solid #c2b192;
}

.list-group.list-group-horizontal li {
    background-color: transparent;
}

.option {
    margin-left: 15px;
}

.hdd-item {
    background-color: #ffffff;
    padding: 5px;
}

.scrollable {
    max-height: 100%;
    overflow-y: scroll;
}

.gamelogo {
    width: 95px;
    height: 95px;
}

.card-body {
    background-color: #fdf0d9;
    padding: 1rem 1rem 0 1rem;
    border-color: #c2b192;
    color: #000000;
}

.game-title {
    color: #3a3a3a;
}

.game-btn {
    padding-left: 0;
}

.btn {
    border-style: solid;
    border-width: 0 1px 4px 1px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #ac2935;
}

.btn-danger:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #dc3545;
    border-color: #ac2935;
}

.btn-secondary {
    border-color: #565e65;
}

.btn-link {
    color: #a6310e;
}

.img-square-wrapper img {
    border-radius: .25rem;
}

.list-group-item {
    background-color: transparent;
    #border: none;
}

.list-group-item.border-0 {
    padding:0 0 0.5rem 0.2rem;
}

.list-group-item.border-no {
    padding:0 0 0rem 0rem;
    border-bottom: 1px dashed #8a7d65;
}

.list-group-item.border-no .card {
    border: none;
    #border-bottom: 1px solid rgba(0,0,0,.125);
}

.list-group-item.border-no .card-body {
    padding-bottom: 0.5rem;
    border: none;
}

.list-group-item a {
    color: #a6310e;
}

.badge-primary {
    color: #3a3a3a;
    background-color: #ffc500;
}

#ul-genre {
    background-image: url(/f/WikiaRail-Background.webp);
    background-attachment: local;
    border: 7px solid transparent;
    -webkit-border-image: url(/f/Main_page_rail_border.webp) 17 repeat;
}

#ul-genre li {
    #background-color: #bf0017;
    color: #fcd144;
    #box-shadow: 0 0 10px #000 inset;
}

@media screen and (max-width: 390px) and (min-width: 300px) {
    .gamelogo {
        width: 80px;
        height: 80px;
    }
    .list-group-item {
        padding: 0.6rem 0.8rem;
    }
}

@media screen and (max-width: 300px){
    .gamelogo {
        width: 55px;
        height: 55px;
    }
    .game-title {
        font-size: 10px;
    }
    .game-card {
        padding: 0.2rem 0.2rem 0 0.2rem;
    }
    .list-group-item {
        padding: 0.3rem;
    }
    .game-btn {
        padding:3px 6px;
        font-size:80%;
        line-height: 1.2;
    }
    .game-btn .bi {
        width: 20px;
        height: 20px;
    }
}

a.account-link {
    color: #fcd144;
    text-decoration: none;
    margin-right: 0.4rem;
}

.badge-danger2 {
    color: #fff;
    background-color: #00000080;
}

.nav-tabs {
    border: none;
}

.nav-link.active2 {
    background-color: #fdf0d9;
}